<!doctype html>
<html>
  <head>
    <title>HostAdmin Host Editor</title>
    <meta charset="utf-8">

    <link rel="stylesheet" href="lib/CodeMirror/lib/codemirror.css">
    <script src="lib/CodeMirror/lib/codemirror.js"></script>
    <script src="lib/CodeMirror/mode/hostadmin/hostadmin.js"></script>
    <script src="lib/CodeMirror/addon/selection/active-line.js"></script>

    <script src="lib/jquery-1.8.3.min.js"></script>
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>

    <style type="text/css">
      .CodeMirror {
      border: 1px solid #CCC;
      border-radius:4px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      }
      .container-narrow {
	margin: 0 auto;
	max-width: 940px;
      }

      .CodeMirror-activeline-background {background: #e8f2ff !important;}
    </style>
  </head>
  <body>
   <div class="container-narrow">

    <button id="btnSave" class="btn btn-large btn-primary pull-right">Save</button>
    <h1>HostAdmin Host Editor</h1>

<div class="alert hide" id="savefailed">
Write hosts file failed check permissions, <a href="#">Learn more</a>
</div>
	<hr />
    <textarea id="code" name="code"></textarea>

<hr />


<div id="syntaxhelp" style="height: 200px;overflow: auto;">

<pre id="syntax-common">
<span class="label label-success">Common Hosts File Syntax</span>
[#] IP HOSTNAME [# COMMENT] 

<span class="label label-info">Note</span>
Setting 'hide' as comment could prevent this line from managing by HostAdmin
</pre>

<pre id="syntax-grouping">
<span class="label label-success">Grouping</span>
[#] IP HOSTNAME [# COMMENT] 
#==== GROUPNAME
[...]
#====

<span class="label label-info">Example</span>

#==== Project 1
#127.0.0.1       localhost1
127.0.0.1       localhost2
127.0.0.1       localhost3
#====

#==== Project 2
#127.0.0.1       localhost1
#127.0.0.1       localhost2
#127.0.0.1       localhost3
#====

</pre>

<pre>
<span class="label label-success">Bulk Hide</span>
#hide_all_of_below
....

#All text here will be parsed as comment

....
</pre>
</div>

<hr />
<div id="footer" class="row" style="text-align:center">
<p>
Editor powered by <a href="http://codemirror.net/" target="_blank">CodeMirror</a> | 
<a href="http://code.google.com/p/fire-hostadmin/issues" target="_blank">Feedback</a>

</p>
</div>

</div>


<div id="contentchanged" class="modal hide fade">
<div class="modal-body">
<p>Host file has changed outside! Reload ?  </p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal" aria-hidden="true">Don't Reload</a>
<a id="mreload" href="#" class="btn btn-warning">Reload, Changes will lose</a>
</div>
</div>


<script src="glue.js"></script>
<script src="editor.js"></script>
<a href="https://github.com/tg123/chrome-hostadmin" target="_blank"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
</body>
</html>
